<template>
  <div class="mobile-menu-wrapper">
    <div class="menus">
      <div class="menu" v-for="menu in menus" :key="menu.id" :class="{'active': menu === activeMenu}" @click="clickMenu(menu)">
        <span>{{ menu.name }}</span>
        <div class="sub-menus" v-show="menu === activeMenu">
          <div class="sub-menu" v-for="sub in menu.children" :key="sub.id" @click.stop="chickSubMenu(sub, menu)">
            <span :class="{'active': sub === activeSubMenu}">{{ sub.name }}</span>
            <div class="grand-sub-menus" v-show="sub === activeSubMenu" v-if="sub.children">
              <div class="grand-sub-menu" v-for="grand in sub.children" :key="grand.id" @click.stop="chickGrandMenu(grand, sub, menu)">
                <span :class="{'active': grand === activeGrandMenu}">{{ grand.name }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
<!--    <el-cascader-panel :options="options" class="mobile-menu" @change="toPage" @expand-change="expandChange"></el-cascader-panel>-->
  </div>
</template>

<script>
export default {
  label: 'MobileMenu',
  data () {
    return {
      activeMenu: {},
      activeSubMenu: {},
      activeGrandMenu: {},
      menus: [
        {
          id: '1',
          name: '智慧后勤',
          clickable: false,
          children: [
            { id: '12', name: '班车服务', clickable: false, children: [{ id: '121', name: '路线查询', clickable: true }, { id: '122', name: '人员查询', clickable: true }, { id: '123', name: '时间段查询', clickable: true }, { id: '124', name: '预警查询', clickable: true }] },
            { id: '13', name: '维修服务', clickable: false, children: [{ id: '131', name: '信息查询', clickable: true }, { id: '132', name: '总分析', clickable: true }, { id: '133', name: '楼宇分析', clickable: true }] }
          ]
        },
        {
          id: '2',
          name: '智慧餐饮',
          clickable: false,
          children: [
            { id: '21', name: '基本信息', clickable: true },
            { id: '22', name: '统计分析', clickable: true, children: [{ id: '221', name: '采购统计', clickable: true }, { id: '222', name: '一卡通统计', clickable: true }, { id: '223', name: '用电统计分析', clickable: true }, { id: '224', name: '消费营收分析', clickable: true }] }
          ]
        },
        {
          id: '3',
          name: '能源管理',
          clickable: false,
          children: [
            { id: '31', name: '用水管理', clickable: false, children: [{ id: '311', name: '水总量分析', clickable: true }, { id: '312', name: '楼宇用水分析', clickable: true }] },
            {
              id: '32',
              name: '用电管理',
              clickable: false,
              children: [{ id: '321', name: '电总量分析', clickable: true }, { id: '322', name: '楼宇用电分析', clickable: true },
                { id: '323', name: '用电查询', clickable: true }, { id: '324', name: '用电统计分析', clickable: true }, { id: '325', name: '用电占比分析', clickable: true },
                { id: '326', name: '房间用电查询', clickable: true }, { id: '327', name: '用电排行', clickable: true }]
            }
            // {
            //   id: '33',
            //   name: '用气管理',
            //   clickable: false,
            //   children: [{ id: '331', name: '气总量分析', clickable: true }, { id: '332', name: '供暖供热用气分析', clickable: true },
            //     { id: '333', name: '餐饮用气分析', clickable: true }, { id: '334', name: '其他情况', clickable: true }]
            // },
            // { id: '34', name: '碳排放管理', clickable: false, children: [{ id: '341', name: '碳总量分析', clickable: true }, { id: '342', name: '楼宇用碳分析', clickable: true }] }
          ]
        },
        {
          id: '4',
          name: '校园规划',
          clickable: false,
          children: [
            { id: '41', name: '楼宇信息', clickable: true },
            { id: '42', name: '在建楼宇信息', clickable: true },
            { id: '43', name: '统计分析', clickable: true }
          ]
        },
        {
          id: '5',
          name: '智慧楼宇',
          clickable: false,
          children: [
            { id: '51', name: '工程信息', clickable: false, children: [{ id: '511', name: '信息查询', clickable: true }, { id: '512', name: '统计分析', clickable: true }] },
            { id: '52', name: '设备信息', clickable: false, children: [{ id: '521', name: '信息查询', clickable: true }, { id: '522', name: '统计分析', clickable: true }] }
          ]
        },
        {
          id: '6',
          name: '人员信息',
          clickable: false,
          children: [
            { id: '61', name: '人员轨迹', clickable: true }]
        }
      ]
      // options: [
      //   {
      //     value: 'SmartLogistics',
      //     label: '智慧后勤',
      //     children: [
      //       {
      //         value: '12',
      //         label: '班车服务',
      //         children: [
      //           { value: '121', label: '路线查询' },
      //           { value: '122', label: '人员查询' }
      //         ]
      //       },
      //       {
      //         value: '13',
      //         label: '维修服务',
      //         children: [
      //           { value: '131', label: '信息查询' },
      //           { value: '132', label: '统计分析' },
      //           { value: '133', label: '楼宇分析' }
      //         ]
      //       }
      //     ]
      //   },
      //   {
      //     value: 'EnergyManagement',
      //     label: '能源管理',
      //     children: [
      //       { value: '31', label: '用水管理', children: [{ value: '311', label: '水总量分析' }, { value: '312', label: '楼宇用水分析' }] },
      //       { value: '32', label: '用电管理', children: [{ value: '321', label: '电总量分析' }, { value: '322', label: '楼宇用电分析' }] },
      //       {
      //         value: '33',
      //         label: '用气管理',
      //         clickable: false,
      //         children: [
      //           { value: '331', label: '气总量分析' },
      //           { value: '332', label: '供暖供热用气分析' },
      //           { value: '333', label: '餐饮用气分析' },
      //           { value: '334', label: '其他情况' }]
      //       },
      //       {
      //         value: '34',
      //         label: '碳排放管理',
      //         children: [
      //           { value: '341', label: '碳总量分析' },
      //           { value: '342', label: '楼宇用碳分析' }
      //         ]
      //       }
      //     ]
      //   },
      //   {
      //     value: 'CampusPlanning',
      //     label: '校园规划',
      //     children: [
      //       { value: '41', label: '基本信息' },
      //       { value: '42', label: '统计分析' }]
      //   },
      //   {
      //     value: 'PersonInformation',
      //     label: '人员信息',
      //     children: [
      //       { value: '61', label: '人员轨迹' }]
      //   },
      //   {
      //     value: 'SmartBuilding',
      //     label: '智慧楼宇',
      //     children: [
      //       { value: '51', label: '工程信息', children: [{ value: '511', label: '信息查询' }, { value: '512', label: '统计分析' }] },
      //       { value: '52', label: '设备信息', children: [{ value: '521', label: '信息查询' }, { value: '522', label: '统计分析' }] }]
      //   },
      //   {
      //     value: 'SmartCatering',
      //     label: '智慧餐饮',
      //     children: [
      //       {
      //         value: '21',
      //         label: '基本信息'
      //       },
      //       {
      //         value: '22',
      //         label: '统计分析'
      //       }
      //     ]
      //   }
      // ]
    }
  },
  methods: {
    clickMenu (menu) {
      this.activeMenu = {}
      this.activeSubMenu = null
      setTimeout(() => {
        this.activeMenu = menu
      }, 100)
    },
    chickSubMenu (son, parent) {
      this.activeMenu = parent
      this.activeSubMenu = {}
      this.activeGrandMenu = null
      setTimeout(() => {
        this.activeSubMenu = son
      }, 100)
    },
    chickGrandMenu (grand, son, parent) {
      this.activeMenu = parent
      this.activeSubMenu = son
      this.activeGrandMenu = null
      setTimeout(() => {
        this.activeGrandMenu = grand
        this.toPage(grand.id)
      }, 100)
    },
    toPage (id) {
      this.$router.replace({ name: 'DetailInformation', query: { id: id } })
      this.$bus.$emit('mobile-show')
    },
    expandChange (val) {
      console.error(val)
    }
  }
}
</script>

<style scoped lang="scss">
.mobile-menu {
  display: flex;
  height: 100%;
  border: none !important;
  :deep(.el-cascader-menu) {
    flex: 1;
    min-width: initial;
    .el-cascader-menu__wrap {
      height: inherit !important;
    }
    .el-cascader-node {
      padding: 0;
      border-bottom: 1px solid #ededed;
    }
  }
}
</style>
